/* 顶部轮播 */
var cloneNode = $('.notice').firstElementChild.cloneNode(true)
$('.notice').appendChild(cloneNode)
var index = 0
var notice_timer = null
function noticePlay() {
  notice_timer = setInterval(function () {
    index++
    animate($('.notice'), 'scrollTop', index * 40, function () {
      if (index === $('.notice li').length - 1) {
        index = 0
        $('.notice').scrollTop = 0
      }

    })
  }, 3000)
}
noticePlay() // 进入页面播放

/* 头部商品分类 部分 */
var template = ''
dataList.navs.forEach(function (item) {
  template += `<li>
      <a href="./list.html?class=${item.class}">
        <div><img src="${item.icon}">
        </div>
        <span>${item.title}</span>
      </a>
    </li>`
})
$('.nav_items').innerHTML = template

// 商品列表页

// 获取url后面的class参数值（用于区分当前列表页应该展示哪个分类的商品数据）

var flag = getQueryString('class')
var datas = dataList[flag]

$('.ad>div').style.backgroundImage = `url(${datas.banner.bgimg})`
$('.ad>p').innerText = `${datas.banner.title}`


// 渲染商品列表
var template = ''
datas.list.forEach(function (item) {
  template += `<a href="./detail.html?id=${item.id}">
          <div>
            <div class="bg">
              <img src="${item.imgurl}"
                alt="">
            </div>
          </div>
          <div>
            <h3>${item.title}</h3>
            <p class="des">${item.description}</p>
            <p class="price">￥<span>${item.price}</span></p>
          </div>
        </a>`
})

$('.mavic_list').innerHTML = template


// 渲染mavic 头部部分
var template1 = `<p class="mavic_head_left">${datas.title}</p>
        <div class="mavic_head_right"><a href="javascript:;">更多></a></div>`
$('.mavic_head').innerHTML = template1

// 渲染Mavic 身体部分
var template2 = `<a href="./detail.html?id=${datas.main.id}" class="mavic_body_left">
          <div>
            <div class="bg"
              style="background-image: url('${datas.main.imgurl}');">
            </div>
          </div>
          <div>
            <h3>${datas.main.title}</h3>
            <p class="des">${datas.main.description}</p>
            <p class="price">￥<span>${datas.main.price}</span></p>
          </div>
        </a>
        <video autoplay loop muted
          poster="${datas.main.poster}"
          class="mavic_body_right"></video>`
$('.mavic_body').innerHTML = template2

// 返回顶部操作
window.onscroll = function () {
  if (document.documentElement.scrollTop >= 800) {
    $('.toTop').style.display = 'block'
  } else {
    $('.toTop').style.display = 'none'
  }
}
$('.toTop').onclick = function () {
  animate(document.documentElement, 'scrollTop', 0)
}
